<template>
  <div class="matrix-dashboard">
    <!-- 页面标题 -->
    <!-- <div class="page-header">
      <h1 class="page-title">矩阵业务系统</h1>
      <p class="page-subtitle">水库管理综合业务平台</p>
    </div> -->

    <!-- 系统概览统计 -->
    <div class="overview-section">
      <el-row :gutter="20" class="overview-cards">
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="overview-card total-card">
            <div class="card-icon total-icon">
              <i class="el-icon-data-line"></i>
            </div>
            <div class="card-content">
              <h3 ref="totalCount">0</h3>
              <p>水库总数</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="overview-card normal-card">
            <div class="card-icon normal-icon">
              <i class="el-icon-check"></i>
            </div>
            <div class="card-content">
              <h3 ref="normalCount">0</h3>
              <p>正常运行</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="overview-card warning-card">
            <div class="card-icon warning-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="card-content">
              <h3 ref="warningCount">0</h3>
              <p>预警信息</p>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <div class="overview-card pending-card">
            <div class="card-icon pending-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="card-content">
              <h3 ref="pendingCount">0</h3>
              <p>待办事项</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 四个四级模块 -->
    <div class="modules-section">
      <el-row :gutter="24" class="module-grid">
        <!-- 四全模块 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-card">
            <div class="module-header">
              <h3>四全管理</h3>
              <span class="module-subtitle">全面覆盖水库管理</span>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-value">{{ siquanStats.registered }}</span>
                <span class="stat-label">注册登记</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siquanStats.dispatch }}</span>
                <span class="stat-label">调度运用</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siquanStats.maintenance }}</span>
                <span class="stat-label">维修养护</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siquanStats.inspection }}</span>
                <span class="stat-label">巡视检查</span>
              </div>
            </div>
            <div class="module-actions">
              <el-button type="primary" size="small" @click="navigateTo('/matrix/siquan')">
                进入管理
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 四制模块 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-card">
            <div class="module-header">
              <h3>四制建设</h3>
              <span class="module-subtitle">完善管理制度体系</span>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-value">{{ sizhiStats.management }}</span>
                <span class="stat-label">管理体制</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ sizhiStats.responsibility }}</span>
                <span class="stat-label">职责管理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ sizhiStats.funding }}</span>
                <span class="stat-label">经费管理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ sizhiStats.supervision }}</span>
                <span class="stat-label">监督管理</span>
              </div>
            </div>
            <div class="module-actions">
              <el-button type="primary" size="small" @click="navigateTo('/matrix/sizhi')">
                进入管理
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 四预模块 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-card">
            <div class="module-header">
              <h3>四预防控</h3>
              <span class="module-subtitle">预警预报预案预演</span>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-value">{{ siyuStats.weather }}</span>
                <span class="stat-label">气象信息</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siyuStats.warning }}</span>
                <span class="stat-label">预警配置</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siyuStats.plan }}</span>
                <span class="stat-label">应急预案</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siyuStats.drill }}</span>
                <span class="stat-label">演练管理</span>
              </div>
            </div>
            <div class="module-actions">
              <el-button type="primary" size="small" @click="navigateTo('/matrix/siyu')">
                进入管理
              </el-button>
            </div>
          </div>
        </el-col>

        <!-- 四管模块 -->
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="module-card">
            <div class="module-header">
              <h3>四管并重</h3>
              <span class="module-subtitle">管人管事管物管钱</span>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-value">{{ siguanStats.personnel }}</span>
                <span class="stat-label">人员管理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siguanStats.affairs }}</span>
                <span class="stat-label">事务管理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siguanStats.assets }}</span>
                <span class="stat-label">物资管理</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ siguanStats.finance }}</span>
                <span class="stat-label">财务管理</span>
              </div>
            </div>
            <div class="module-actions">
              <el-button type="primary" size="small" @click="navigateTo('/matrix/siguan')">
                进入管理
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷操作和最新动态 -->
    <div class="bottom-section">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="quick-actions">
            <h3>快捷操作</h3>
            <div class="action-buttons">
              <el-button type="primary" icon="el-icon-plus" @click="navigateTo('/matrix/siquan/register')">
                新增水库登记
              </el-button>
              <el-button type="success" icon="el-icon-view" @click="navigateTo('/matrix/siquan/dispatch')">
                调度运用查看
              </el-button>
              <el-button type="warning" icon="el-icon-warning" @click="navigateTo('/matrix/siyu/warning')">
                预警信息管理
              </el-button>
              <el-button type="info" icon="el-icon-document" @click="navigateTo('/matrix/siguan/personnel')">
                人员管理
              </el-button>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="recent-activities">
            <h3>最新动态</h3>
            <div class="activity-list">
              <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
                <div class="activity-time">{{ activity.time }}</div>
                <div class="activity-content">{{ activity.content }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MatrixDashboard',
  data() {
    return {
      // 系统概览数据
      totalReservoirs: 156,
      normalReservoirs: 142,
      warningCount: 8,
      pendingTasks: 23,
      
      // 四全模块统计
      siquanStats: {
        registered: 156,
        dispatch: 89,
        maintenance: 45,
        inspection: 234
      },
      
      // 四制模块统计
      sizhiStats: {
        management: 12,
        responsibility: 28,
        funding: 15,
        supervision: 67
      },
      
      // 四预模块统计
      siyuStats: {
        weather: 24,
        warning: 8,
        plan: 15,
        drill: 6
      },
      
      // 四管模块统计
      siguanStats: {
        personnel: 89,
        affairs: 156,
        assets: 234,
        finance: 78
      },
      
      // 最新动态
      recentActivities: [
        {
          id: 1,
          time: '2024-01-15 14:30',
          content: '完成了XX水库的安全检查，发现3处需要维修的设施'
        },
        {
          id: 2,
          time: '2024-01-15 10:15',
          content: '更新了汛期调度预案，涉及15座重点水库'
        },
        {
          id: 3,
          time: '2024-01-14 16:45',
          content: '新增水库管理人员培训记录12条'
        },
        {
          id: 4,
          time: '2024-01-14 09:20',
          content: '发布了本周水情预警信息，涉及8个区域'
        }
      ]
    }
  },
  mounted() {
    this.animateNumbers()
  },
  methods: {
    navigateTo(path) {
      this.$router.push(path)
    },
    animateNumbers() {
      // 数字滚动动画
      this.animateNumber(this.$refs.totalCount, this.totalReservoirs, 2000)
      this.animateNumber(this.$refs.normalCount, this.normalReservoirs, 2200)
      this.animateNumber(this.$refs.warningCount, this.warningCount, 1800)
      this.animateNumber(this.$refs.pendingCount, this.pendingTasks, 2400)
    },
    animateNumber(element, target, duration) {
      if (!element) return
      
      const start = 0
      const startTime = performance.now()
      
      const animate = (currentTime) => {
        const elapsed = currentTime - startTime
        const progress = Math.min(elapsed / duration, 1)
        
        // 使用缓动函数
        const easeOutQuart = 1 - Math.pow(1 - progress, 4)
        const current = Math.floor(start + (target - start) * easeOutQuart)
        
        element.textContent = current
        
        if (progress < 1) {
          requestAnimationFrame(animate)
        } else {
          element.textContent = target
        }
      }
      
      requestAnimationFrame(animate)
    }
  }
}
</script>

<style scoped>
.matrix-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.page-subtitle {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.overview-section {
  margin-bottom: 30px;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 不同状态卡片的颜色主题 */
.total-card .card-icon,
.total-icon {
  background: linear-gradient(135deg, #409EFF 0%, #66b3ff 100%);
}

.normal-card .card-icon,
.normal-icon {
  background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
}

.warning-card .card-icon,
.warning-icon {
  background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
}

.pending-card .card-icon,
.pending-icon {
  background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.card-icon i {
  font-size: 24px;
  color: white;
}

.card-content h3 {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 5px 0;
}

.card-content p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

.modules-section {
  margin-bottom: 30px;
}

.module-grid {
  /* 使用Element Plus的栅格系统，不需要额外的grid样式 */
}

.module-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.module-header {
  margin-bottom: 20px;
  border-bottom: 2px solid #f1f2f6;
  padding-bottom: 15px;
}

.module-header h3 {
  font-size: 20px;
  color: #2c3e50;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.module-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.module-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #3498db;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
}

.module-actions {
  text-align: center;
}

.bottom-section {
  /* 使用Element Plus的栅格系统，不需要额外的grid样式 */
}

.quick-actions,
.recent-activities {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.quick-actions h3,
.recent-activities h3 {
  font-size: 18px;
  color: #2c3e50;
  margin: 0 0 20px 0;
  font-weight: 600;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.activity-list {
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  padding: 12px 0;
  border-bottom: 1px solid #f1f2f6;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-time {
  font-size: 12px;
  color: #95a5a6;
  margin-bottom: 5px;
}

.activity-content {
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .matrix-dashboard {
    padding: 15px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .page-subtitle {
    font-size: 12px;
  }
  
  .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .action-buttons .el-button {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .overview-card {
    padding: 16px;
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  
  .card-content h3 {
    font-size: 24px;
  }
  
  .module-card {
    padding: 20px;
  }
}
</style>